<!DOCTYPE html PUBLIC>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>后台管理中心</title>
    <link rel="stylesheet" href="/admin/css/pintuer.css"/>
    <link rel="stylesheet" href="/admin/css/admin.css"/>
    <link href="/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="/admin/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/pintuer.js"></script>
    <title>编辑电影分类</title>
    <style type="text/css">
        .occupation-box {
            border: 1px solid #ddd;
            width: 300px !important;
            height: 100px;
            padding: 20px;
        }

        .occupation-box > label {
            margin-right: 22px;
        }
        .body-content label {
            font-size: 1.5rem;
        }
    </style>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong><span class="icon-pencil-square-o"></span> 电影分类信息</strong></div>
    <div id="app" class="body-content">
        <form method="post" class="form-x" id="form" @submit.prevent="submit">
            <div class="form-group">
                <div class="label">
                    <label>分类名称：</label>
                </div>
                <div class="field">
                    <input type="hidden" name="id" v-model="category.id" />
                    <input type="text" class="input" name="name" v-model="category.name" size="100" />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button border-main icon-check-square-o" type="submit"> 提交</button>
                    <button class="button border-red icon-tags" type="button" onclick="window.history.go(-1);"> 返回
                    </button>
                </div>
            </div>
        </form>
    </div>

    <script type="text/javascript" src="/public/js/vue.js"></script>
    <script type="text/javascript" src="/public/js/axios.js"></script>
    <script type="text/javascript" src="/public/js/axios-config.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                category: {

                },
                submitUrl: '/api/v1/category/save'
            },
            methods: {
                submit(){

                    axios.post(this.submitUrl,this.category)
                        .then(res =>{
                            alert(res.message)
                        })
                        .catch(err => {})
                }
            },
            mounted() {
                console.log("submitUrl:", this.submitUrl); // 确认
                const urlObj = new URL(window.location.href)
                const params = new URLSearchParams(urlObj.search)
                const cid = params.get('id')
                if(cid){
                    let url = 'api/v1/category/detail/'+cid
                    axios.get(url)
                        .then(res =>{
                            this.category = res.data
                        })
                    this.submitUrl = "/api/v1/category/update"
                }
            }

        })
    </script>
</div>
</body>
</html>